<!-- 合同 -->
<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-appointment-container`]">
      <view class="appointment-list">
        <view class="appointment-item" v-for="(item, index) in pageConfig.dataList" :key="index" @click="handleDetail(item)">
          <view class="date">
            <span v-if="item.status == 3">
              合同剩余
              <span class="primary-color"> {{ item.left_day }} </span>
              天到期
            </span>
            <span v-if="item.status == 4">合同未生效</span>
            <span v-else>{{ item.current_step_name }}</span>
            <span class="see_state">{{ item.current_step_name }}</span>
          </view>
          <view class="detail">
            <view class="room">
              <view v-if="item.type !== 'project'" class="room-left">
                <image :src="item.cover || item.room_type_cover" alt="" />
              </view>
              <view class="room-right">
                <view class="room-type-name">{{ item.project_name }}</view>
                <view class="room-type-name">{{ item.room_name }}</view>
                <view class="price">
                  <text style="font-size: 24rpx">房租</text>
                  <template v-if="item.is_qy === 0 && item.current_step_name === '续租待签字'">
                    <text class="money">待定</text>
                  </template>
                  <template v-else>
                    <text class="money">{{ item.monthly_rent }}</text>
                    <text class="unit">元/间/月</text>
                  </template>
                </view>
                <view class="room-type-detail">{{ item.room_type }}</view>
              </view>
            </view>
          </view>
          <view v-if="item.current_step === '3' && item.is_renew === 0" class="progress-bar">
            <!-- #ifdef APP-PLUS -->
            <!--  #endif -->
            <view v-if="item.current_step_name == '租赁中' && item.checkout_settings_open == '1' && item.latest_status == '0'" @click.stop="handleCheckOutDetail(item)" class="btn"
              >退房进度</view
            >
            <view
              v-if="item.current_step_name == '租赁中' && item.checkout_settings_open == '1' && (item.latest_status == '1' || item.latest_status == '')"
              @click.stop="handleCheckOut(item)"
              class="btn"
              >申请退房</view
            >

            <view v-if="renewStatusVisible(item)" @click.stop="handleRelet(item)" class="btn">{{ item.renew_status === 1 ? '续租进度' : '申请续租' }}</view>
          </view>
          <view v-if="item.status == 4" class="btn-group">
            <view class="btn">*请于{{ newDate }} 23.59.59之前确认签字，否则视为自动放弃。</view>
          </view>
          <view v-else-if="item.status == 7" class="btn-group">
            <view class="btn">*请于合同到期前30天签字确认，否则您将丧失优先续租权。</view>
          </view>
        </view>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { allContract } from './api'

export default {
  name: 'componentName',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      newDate: '',
      pageConfig: {
        dataList: [],
        page: 1,
        pageLimit: 10,
      },
      // current_step
      // 1 待缴首期 2 待入住 3租赁中 4 待退押金/押金转至新合同  5押金已退
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.getData()
    const date = new Date()
    const year = date.getFullYear() // 获取年份
    const month = (date.getMonth() + 1).toString().padStart(2, '0') // 获取月份并补充0
    const day = date.getDate().toString().padStart(2, '0') // 获取日期并补充0
    this.newDate = `${year}-${month}-${day}`
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {
    this.getData()
  },
  // 加载更多
  onReachBottom() {
    // if (this.pageConfig.dataList.length >= this.pageConfig.dateCount) return
    // this.pageConfig.page++
    // this.getData()
  },

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getData() {
      this.getList()
    },
    async getList() {
      const { data } = await allContract()
      uni.stopPullDownRefresh()
      this.pageConfig.dataList = data
    },
    checkOutVisible(item) {
      return !(item.current_step_name !== '租赁中' || item.is_qy === '1' || item.is_owner !== 1 || item.check_out_apply_id != 'null')
    },
    renewStatusVisible(item) {
      return !(item.renew_status === 2 || item.current_step_name !== '租赁中' || item.is_qy === '1' || item.is_owner !== 1)
    },
    // 申请续租
    handleRelet({ begin_date, id: contractId, project_name, room_name, renew_status }) {
      if (renew_status === 1) {
        // 查看续租进度
      } else {
        // 申请续租
        this.$ROUTE.go('/pages/subpackage/contract/relet', { begin_date, contractId, project_name, room_name })
      }
    },
    handleCheckOut(item) {
      //跳转申请退房页面
      this.$ROUTE.go('/pages/subpackage/contract/checkOut', { contract_id: item.id })
    },
    handleCheckOutDetail(item) {
      //跳转申请退房详情页面
      this.$ROUTE.go('/pages/subpackage/contract/checkOutDetail', { contract_id: item.id })
    },
    handleDetail({ status, id }) {
      // 1 待交首期 2 待入住 3 租赁中 4 待签字 5 押金已退 6 续租待执行 7 续租待签字
      if (status == 4) {
        this.$ROUTE.go('/pages/subpackage/contract/lease-information', { id })
      } else if (status == 1 || status == 2 || status == 3) {
        this.$ROUTE.go('/pages/subpackage/contract/detail', { id })
      } else if (status == 7) {
        // 苏州往后放这个状态页面，珠海没有对接上上签，就没有这一块
        // uni.$uv.toast('请到苏享家公寓公众号个人中心完成签字')
        this.$ROUTE.go('/pages/subpackage/contract/renewal-information', { id })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('appointment-container')} {
  background: #f5f5f5;
  .primary-color {
    color: $uv-primary;
  }
  .appointment-list {
    display: flex;
    flex-direction: column;
    .appointment-item {
      &:first-child {
        margin-top: 16rpx;
      }
      margin: 0rpx 16rpx 24rpx;
      box-sizing: border-box;
      .date {
        box-sizing: border-box;
        padding: 16rpx 32rpx;
        font-weight: 600;
        font-size: 12px;
        color: #222222;
        background: white;
        border-radius: 16rpx;
        display: flex;
        justify-content: space-between;
        .see_state {
          font-weight: 600;
          font-size: 20rpx;
          color: $uv-primary;
          padding: 4rpx 8rpx;
          border-radius: 8rpx;
        }
      }
      .detail {
        border-top: 1px dashed #f1f1f1;
        border-top-left-radius: 16rpx;
        border-top-right-radius: 16rpx;
        background: white;
        padding: 10rpx 32rpx;
        .title {
          display: flex;
          justify-content: space-between;
          font-weight: 600;
          font-size: 16px;
          color: #222222;
        }
        .address {
          font-weight: 400;
          font-size: 11px;
          color: #666666;
          margin: 16rpx 0;
        }
        .room {
          display: flex;
          .room-left {
            width: 240rpx;
            height: 180rpx;
            border-radius: 14rpx;
            overflow: hidden;
            margin-right: 16rpx;
            image {
              width: 100%;
              height: 100%;
            }
          }
          .room-right {
            .room-type-name {
              font-weight: 600;
              font-size: 14px;
              color: #222222;
              margin: 8rpx 0;
            }
            .room-type-detail {
              font-weight: 400;
              font-size: 11px;
              color: #666666;
            }
            .price {
              .money {
                margin-left: 4rpx;
                font-size: 24rpx;
                color: $uv-price-primary;
              }
              .unit {
                font-weight: 600;
                font-size: 20rpx;
                margin-left: 10rpx;
              }
            }
          }
        }
      }
      .btn-group {
        background: white;
        display: flex;
        .btn {
          color: $uv-price-primary;
          padding: 15rpx 24rpx;
          font-size: 20rpx;
        }
      }
      .progress-bar {
        background: white;
        padding: 15px;
        text-align: right;
        .btn {
          margin: 15px 0 0 15px;
          display: inline-block;
          padding: 8px;
          border-radius: 5px;
          color: white;
          font-size: 12px;
          background: $uv-primary;
        }
      }
    }
  }
}
</style>
